<template>
  <div>
    <a-form :model="formState" ref="formDataRef" name="basic" :label-col="{ span: 7 }" :wrapper-col="{ span: 16 }" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
      <a-form-item label="上传文件" name="file" :rules="[{ required: true, message: '请上传文件!' }]">
        <a-upload v-model:fileList="formState.file" name="file" @remove="handleRemove" :before-upload="beforeUpload" :max-count="maxCount">
          <a-button>上传</a-button>
        </a-upload>
      </a-form-item>
      <a-form-item label="模版下载" v-if="showTemplateDownload">
        <a-button type="link" @click="downloadTemplateHandle">下载导入模板</a-button>
      </a-form-item>
      <a-form-item :wrapper-col="{ offset: 8, span: 16 }" class="submit-btn-form-item">
        <a-button type="primary" html-type="submit" :loading="submitLoading" v-debounce>确定</a-button>
        <a-button @click="resetHandle">取消</a-button>
      </a-form-item>
    </a-form>
    <a-drawer class="custom-drawer" v-model:visible="drawerOpts.visible" :title="drawerOpts.title" :maskClosable="false" :closable="true" :width="drawerOpts.width" placement="right">
      <component v-model:visible="drawerOpts.visible" :is="drawerOpts.component" :column="errorColumn" :pass-data="drawerOpts.passData"></component>
    </a-drawer>
  </div>
</template>

<script lang="ts">
import ErrorMessage from "@/components/errorMessageDrawerOpts/index.vue";
export default {
  components: {
    ErrorMessage
  }
};
</script>

<script lang="ts" setup>
import { toRefs, watch } from "vue";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";

const props = withDefaults(
  defineProps<{
    visible: boolean;
    errorColumn?: Array<{ label: string; title: string; width: string }>; //自定义表头字段 用于显示错误信息的表头
    downloadType?: number; //下载模版回调类型    1.装箱信息模版 2.收件信息和装箱信息模版 3.收款流水模版 4.追加费用模版 5.导入应付对账单模版 6.导入物流轨迹模版 7.导入付款流水模版 8.导入运输场模版 9.导入箱子转单号模版 10.批量导入用户模版 11.保险订单    12.导入账单模版
    uploadRequest: (e: any) => void; //上传文件回调
    showTemplateDownload?: boolean; //模版下载显示
    maxCount?: number; //文件数量
  }>(),
  {
    uploadRequest: undefined,
    showTemplateDownload: true,
    maxCount: 1,
    downloadType: 1
  }
);
const { visible, errorColumn, downloadType, uploadRequest, showTemplateDownload, maxCount } = toRefs(props);
const emit = defineEmits<{
  (e: "update:visible", visible: boolean): void;
  (e: "submit"): void;
}>();

const { formState, formDataRef, submitLoading, drawerOpts, templateName } = InitHook();
const { resetHandle, onFinishFailed, onFinish, downloadTemplateHandle, handleRemove, beforeUpload } = OperationHook({
  submitLoading,
  formState,
  formDataRef,
  emit,
  drawerOpts,
  downloadType,
  uploadRequest,
  templateName,
  maxCount
});

watch(
  () => visible.value,
  (v: boolean) => {
    if (!v) {
      resetHandle();
    }
  }
);
</script>
<style lang="stylus" scoped>
:deep(.ant-upload-span){
  margin-top: 15px;
  font-size: 16px;
}
</style>
